<template>
  <div style="margin-right:24px">
    <el-row>
      <el-col :span="6" class="myblog">
        <div class="grid-content bg-purple">
          <el-button id="blogIcon">MyBlog</el-button>
        </div></el-col
      >
      <el-col :span="13"
        ><div class="grid-content bg-purple-light">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">
              <router-link :to="{ name: 'blog' }" class="bloghander"
                >首页</router-link
              >
            </el-menu-item>
            <el-menu-item index="2">
              <router-link :to="{ name: 'guestbook' }" class="bloghander"
                >留言</router-link
              >
            </el-menu-item>
            <el-menu-item index="3">
              <router-link :to="{ name: 'archive' }" class="bloghander"
                >归档</router-link
              >
            </el-menu-item>
            <el-menu-item index="4">
              <router-link :to="{ name: 'essay' }" class="bloghander"
                >随笔</router-link
              >
            </el-menu-item>
          </el-menu>
        </div></el-col
      >
      <el-col :span="5"
        ><div class="grid-content bg-purple" >
          <el-row >

			  <!-- 未登录 -->
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-button class="login" v-if="this.$root.loginName == ''"> 
					<router-link :to="{name:'login'}" class="lgoinhander">登录</router-link>
					 </el-button>
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-button class="register" v-if="this.$root.loginName == ''">
					<router-link :to="{name:'register'}" class="lgoinhander">注册</router-link>
				</el-button>
              </div></el-col
            >


		<!-- 已登录 -->
			<el-col :span="8"
              ><div class="grid-content bg-purple">
				  <el-button class="logout" v-if="this.$root.loginName != ''">
					<router-link :to="{name:'edit'}" class="lgoinhander">写博客</router-link>
				</el-button>
              </div></el-col
            >
			<!-- <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-button @click="logout()" class="logout" v-if="this.$root.loginName != ''">
					注销
				</el-button>
            </div></el-col> -->

            <el-col :span="8"
              ><div class="grid-content bg-purple-light personalCenter" v-if="this.$root.loginName != ''">
				<el-dropdown trigger="click" >
					<span class="el-dropdown-link" >
						个人中心<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>
							<span @click="setting()">设置</span>
						</el-dropdown-item>
						<el-dropdown-item>
							<span>收藏</span>
						</el-dropdown-item>
						<el-dropdown-item>
							<span>帮助</span>
						</el-dropdown-item>
						<el-dropdown-item>
							<span @click="logout()">注销</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
              </div></el-col
            >

			<!-- 固定头像 -->
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <div class="demo-basic--circle" id="headPortrait">
                  <el-avatar :size="60" :src="imgurl"></el-avatar>
                </div></div
            ></el-col>
          </el-row></div
      ></el-col>
    </el-row>
    <div class="line"></div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
    	activeIndex: "1",
    	circleUrl:
    		"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
	  	loginUser: '',
		  imgurl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
	//   this.$router.go(0);

		
	//   if(key == 4){
	// 	  this.$router.push("essay");
	//   }
    },
	logout(){
		this.axios.post(`http://120.77.213.195:8001/logout`).then((response) => {
			console.log("响应：")
			console.log(response);
			if(response.data.code==0){
				alert("退出成功");
				sessionStorage.setItem("loginUser",'');
				sessionStorage.setItem("token",'');
				this.$router.go(0);
			}
		});
	},
	setting(){
		this.$router.push({ name: 'setting' });
	},
  },
  activated() {
		console.log("activated:"+this.loginUser);
  },
  created() {
	    this.loginUser=sessionStorage.getItem("loginUser");
		this.$root.loginName=sessionStorage.getItem("loginUser");
		this.loginUser = this.$root.loginName;
		// console.log("create:"+this.loginUser);
		if(this.loginUser!=''){
			this.axios.post(`http://120.77.213.195:8001/user/queryByName?name=${this.loginUser}`).then((res)=>{
				// console.log("main初始化")
				// console.log(res);
				this.imgurl = res.data.user[0].imgurl;
			});
		}
		
		
	//   this.loginUser=this.$root.loginName;
	//   console.log("main组件初始化");
	//   console.log(sessionStorage.getItem("loginUser"));
  },
  mounted: function () {
	this.$nextTick(function () {
		 console.log("mounted");
	  console.log(sessionStorage.getItem("loginUser"));
	})
	},
};
</script>

<style>
/* 头部去除下划线 */
.bloghander {
  text-decoration: none;
}
.lgoinhander{
  text-decoration: none;
  color: #606266;
}

#blogIcon {
  /* align-content: center; */
  height: 60px;
  /* padding: 12px 107px; */
  width: 100%;
  /* padding: auto auto; */
  border: 0px;
  /* border: 0px solid #ffffff; */
  font-size: 30px;
  background-color: rgb(234, 238, 238);
}
#headPortrait {
  text-align: center;
  height: 60px;
}
/* 个人中心 */
.personalCenter {
  text-align: center;
  height: 60px;
  line-height: 60px;
  width: 100%;
  /* padding: 12px 12px; */
  border: 0px;
  background-color: rgb(255, 255, 255);
}
.login,
.logout,
.register {
  text-align: center;
  height: 60px;
  width: 100%;

  border: 0px;

  background-color: rgb(255, 255, 255);
}
/* 个人中心 */
.el-dropdown-link {
    cursor: pointer;
    color: #606266;
  }
  /* 个人中心 */
  .el-icon-arrow-down {
    font-size: 12px;
  }

  .el-menu-demo{
	  position:relative;
  }
  body{
	  padding:0;
  }
html{
	/* overflow-y: scroll; */
}
:root{
	/* overflow-x: auto; */
	/* overflow-y: hidden; */
}
:root body{
	position:absolute;
}
body{
	width: 100vw;
	overflow-x: hidden;
}



</style>